<template>
  <div id="OrderMessages" class="content">
    <div class="tabs" style="overflow: auto">
      <el-radio-group v-model="radio_status" size="small" @change="statusChange">
        <el-radio-button label="0">全部</el-radio-button>
        <el-radio-button label="1">已读</el-radio-button>
        <el-radio-button label="2">未读</el-radio-button>
      </el-radio-group>
      <div class="select">
        <el-select v-model="SelectValue_type" @change="typeChange" style="width: 150px;" size="small" placeholder="消息类型">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="bt">
          <el-button type="primary" aria-set size="small" @click="clickAllRead">一键已读</el-button>
        </div>
      </div>
      <div class="table" :style="{ 'height': maxHeight_tableBox + 'px' }">
        <el-table :tableKey="tableKey" style="width: 100%;" :data="tableData"
          :header-cell-style="{ background: '#ebeef5', color: '#fffff' }" @row-click="handleRowClick"
          @cell-mouse-enter="hoverEnter" @cell-mouse-leave="hoverLeave" :max-height="maxHeight_table">
          <el-table-column fixed prop="type" label="消息类型">
            <template slot-scope="scope">
              <!-- read_time 0未读 -->
              <div>
                <!-- <el-badge is-dot class="item" v-if="scope.row.read_time == 0">{{ scope.row.type }}</el-badge> -->
                <el-badge is-dot class="item" v-if="scope.row.read_time == 0">{{ scope.row.type }}</el-badge>
                <span v-else>{{ scope.row.type }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="消息标题">
          </el-table-column>
          <el-table-column prop="content" label="消息内容">
          </el-table-column>
          <el-table-column prop="create_time" label="时间"> </el-table-column>
        </el-table>
        <div class="pagination">
          <pagination :data="pageNation_data" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </pagination>
        </div>
      </div>
      <OrderDFill :fillData.sync="fillData" @refreshRoom="handle_refreshRoom"
        @check_roomApartment="handle_check_roomApartment" @success_edit="editSuccess">
      </OrderDFill>
      <OrderDetail :detailData.sync="detailData" @refreshRoom="handle_refreshRoom"
        @open_fillOrder="handle_open_fillOrder">
      </OrderDetail>
    </div>
  </div>
</template>

<script>
import Pagination from '../../../../components/PaginationPage/Pagination.vue'
import OrderDFill from '../../../../components/myOrderDrawer/OrderFill/Fill.vue'
import OrderDetail from '../../../../components/myOrderDrawer/OrderDetail/Detail.vue'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'OrderMessages',
  components: {
    OrderDetail,
    Pagination,
    OrderDFill
  },

  data() {
    return {
      radio_status: '0',
      SelectValue_type: '0',
      RevocationDrawer: true,
      drawer: false,
      options: [
        {
          value: '0',
          label: '全部消息类型'
        },
        {
          value: '1',
          label: '系统消息'
        },
        {
          value: '2',
          label: '订单消息'
        }
      ],
      tableKey: true,
      tableData: [],
      maxHeight_tableBox: window.innerHeight - 225,//表格+分页 最大高度,
      maxHeight_table: window.innerHeight - 300,//表格最大高度,
      // 传递分页组件的数据
      pageNation_data: {
        total: 0,
        currentPage: 1,
        currentSize: 10,
        small: false
      },
      // 传递给填写订单组件的数据
      fillData: {
        isShow_drawer: false,
        drawer_room_data: [],
        selectOperated: null,//判断当前操作，1预订 2入住,3补录订单
        fill_order_title_show: 1,
        select_room: 0,
        name: 'today',

        orderData: null,
      },
      //订单详情数据
      detailData: {
        name: 'today',
        order_id: null,
        order_status: null,
        isOpen_out_drawer: false,
        list: [],
        detail: null,
      },
    }
  },
  created() {
    this.SelectValue_type = this.$route.query.type ? this.$route.query.type : this.SelectValue_type
    this.radio_status = this.$route.query.status ? this.$route.query.status : this.radio_status
    this.getTableList()
    if (this.$route.query.data) {
      console.log(JSON.parse(this.$route.query.data), 'this.$route.query.data');
      setTimeout(() => {
        let data = JSON.parse(this.$route.query.data)
        this.handleRowClick(data)
      }, 500);
    }

  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },

  computed: {
    ...mapState('d2admin/message', [
      'unreadMessageCount'
    ])
  },
  methods: {
    ...mapActions('d2admin/message', [
      'getCount',
    ]),
    /**
     * 刷新房间信息
     * 
     */
    handle_refreshRoom() {
      console.log('刷新房间信息');
      // this.getScreen()
    },

    /**
     * 修改订单，
     */
    handle_open_fillOrder(data) {
      // console.log('单日房态 打开填写订单');
      this.fillData.orderData = data
      this.fillData.fill_order_title_show = 2
      this.fillData.isShow_drawer = true
      this.fillData.name = 'today'
    },
    handle_check_roomApartment(val) {
      this.uncheck()
      if (val == 'successSubmit') {
        // this.getScreen()
        this.fillData.isShow_drawer = false
      }
    },
    /**
     * 订单修改成功
     */
    editSuccess(detail) {
      console.log(detail, '订单修改成功detail');
      this.fillData.isShow_drawer = false
      this.detailData.detail = detail
      // this.getScreen()
    },




    // 状态按钮改变事件
    statusChange() {
      this.getTableList()
    },
    // 消息类型改变事件
    typeChange() {
      this.getTableList()
    },
    // 监听窗口大小变化 处理窗口大小变化的逻辑
    handleResize() {
      let screenHeight = window.innerHeight;
      this.maxHeight_table = screenHeight - 300
      this.maxHeight_tableBox = screenHeight - 225
    },
    // 分页
    handleSizeChange(val) {
      // 处理每页数量改变的逻辑
      console.log(`每页 ${val} 条`);
      this.pageNation_data.currentSize = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      // 处理当前页码改变的逻辑
      console.log(`当前页: ${val}`);
      this.pageNation_data.currentPage = val
      this.getTableList()
    },
    // 设置一键已读
    clickAllRead() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id')
      }
      console.log(data);
      this.my_request('supplier/message/read', data, 'put').then(res => {
        console.log(res, '设置一键已读结果');
        let { code, data } = res.data
        if (200 == code) {
          this.$message.success('设置成功！')
          this.getTableList()
        } else {
          this.$message.error('设置失败')
        }
      })
    },

    getTableList() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),
        type: this.SelectValue_type,
        status: this.radio_status,
        page: this.pageNation_data.currentPage,
        page_rows: this.pageNation_data.currentSize,
      }
      console.log(data, '获取表格数据');
      this.my_request('supplier/message/list', data, 'GET').then(res => {
        console.log(res, '获取表格数据');
        let { code, data } = res.data
        if (200 == code) {
          this.tableData = data.list
          this.pageNation_data.total = data.total
          this.tableKey = !this.tableKey
        }
      })
    },

    OpenRevocation(data) {
      this.drawer = false
      if (data == '撤销退房') {
        console.log('撤销退房')
        this.RevocationDrawer = true
      }
    },
    handleClick(row) {
      console.log(row)
    },
    ColseDrawer(data) {
      console.log('父组件接受了', data)
      this.drawer = false
    },

    // 点击之后设置为已读 
    changeMessageStatus(id) {
      let data = {
        id,
      }
      this.my_request('supplier/message/detail', data, 'get').then(res => {
        // console.log(res, '点击之后设置为已读结果');
        let { code } = res.data
        if (200 == code) {
          this.tableData.forEach(item => {
            if (item.id == id) {
              this.getCount()
              item.read_time = 1
              this.tableKey = !this.tableKey
            }
          })
        }
      })
    },

    // 改变悬浮样式
    hoverEnter() {
      // console.log("进入了");
      let body = document.querySelector('body') // 这里是把整个页面的鼠标指针都变了，可以指定某个元素范围内
      body.style.cursor = ` pointer` // 注意：这里的 `` 是模板字符窜，不是单引号！！！
    },
    hoverLeave() {
      // console.log("出来了");
      let body = document.querySelector('body') // 这里是把整个页面的鼠标指针都变了，可以指定某个元素范围内
      body.style.cursor = ` default` // 注意：这里的 `` 是模板字符窜，
    },

    handleRowClick(row, event, column) {
      console.log('当前行的数据：', row);
      this.changeMessageStatus(row.id)

      if (row.order_id  && row.order_id != 0) {//row.order_id= 0 是系统消息
        this.detailData.order_id = row.order_id
        this.detailData.isOpen_out_drawer = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
  border-radius: 4px 0 0 4px;
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
  border-radius: 0px 4px 4px 0px;
}

::v-deep .tabs {
  height: 100%;
  // width: 100%;
  padding-left: 24px;
  padding-top: 24px;
  padding-right: 24px;

  .select {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }

  .table {
    background-color: white;
    position: relative;
    overflow: hidden;

    .pagination {
      background-color: white !important;
      position: absolute;
      width: 100%;
      bottom: 5px;
      right: 20px;
    }

  }
}

.content {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 100%;
}
</style>
